<template>
  <section class="main">
    <a-card :bordered="false" title="血糖曲线">
      <template slot="extra">
        <a-button
          v-for="item in duringTime"
          :key="item.value"
          :type="queryParam.period == item.value ? 'danger' : ''"
          :style="{ marginLeft: '7px' }"
          @click="loadData(item.value)"
          >{{ item.text }}</a-button
        >
      </template>
      <template v-if="charts.axisData.length > 0">
        <line-charts
          :key="initCharts"
          :x-axis-data="charts.axisData"
          :y-axis-unit="charts.axisUnit"
          :visual-map="charts.visualMap"
          :legend="charts.legend"
          :show-legend-arr="charts.showLegend"
          :series-data="charts.seriesData"
          :add-line="true"
          :line-style="charts.lineStyle"
          :add-area="true"
          :area-style="charts.areaStyle"
        />
      </template>
      <template v-else>
        <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
      </template>
    </a-card>

    <!-- <a-card style="margin-top: 24px" :bordered="false" title="血糖统计">
      <template slot="extra">
        <a-button
          v-for="item in duringTime"
          :key="item.value"
          :type="queryParam.period == item.value ? 'danger' : ''"
          :style="{ marginLeft: '7px' }"
          @click="loadData(item.value)"
          >{{ item.text }}</a-button
        >
      </template>
      <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
    </a-card> -->

    <a-card style="margin-top: 24px" :bordered="false" title="血糖列表">
      <template slot="extra">
        <a-button
          v-for="item in duringTime"
          :key="item.value"
          :type="queryParam.period == item.value ? 'danger' : ''"
          :style="{ marginLeft: '7px' }"
          @click="loadData(item.value)"
          >{{ item.text }}</a-button
        >
      </template>
      <div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
        <a-button type="primary" @click="handleAdd">添加</a-button>
      </div>
      <template v-if="listDataSource.length > 0">
        <a-table
          ref="table"
          bordered
          size="middle"
          rowKey="date"
          :scroll="{ x: 1080 }"
          :columns="listColumns"
          :dataSource="listDataSource"
          :pagination="ipagination"
          :loading="listDataLoading"
          @change="
            (pagination, filters, sorter, currentDataSource) =>
              handleTableChange(pagination, filters, sorter, currentDataSource, 'getList')
          "
        >
          <template slot="beforeBreakfast" slot-scope="text, record">
            <a-tooltip :title="record | beforeBreakfastRemark">
              <div style="position: relative;">
                <span>{{ record.beforeBreakfast }}</span>
                <span v-if="record.beforeBreakfastStatus == 1" style="position: absolute;right: 12px;color: red;"
                  >↑</span
                >
                <span v-if="record.beforeBreakfastStatus == 3" style="position: absolute;right: 12px;color: green;"
                  >↓</span
                >
              </div>
            </a-tooltip>
          </template>
          <template slot="afterBreakfast" slot-scope="text, record">
            <a-tooltip :title="record | afterBreakfastRemark">
              <div style="position: relative;">
                <span>{{ record.afterBreakfast }}</span>
                <span v-if="record.afterBreakfastStatus == 1" style="position: absolute;right: 12px;color: red;"
                  >↑</span
                >
                <span v-if="record.afterBreakfastStatus == 3" style="position: absolute;right: 12px;color: green;"
                  >↓</span
                >
              </div>
            </a-tooltip>
          </template>
          <template slot="beforeLunch" slot-scope="text, record">
            <a-tooltip :title="record | beforeLunchRemark">
              <div style="position: relative;">
                <span>{{ record.beforeLunch }}</span>
                <span v-if="record.beforeLunchStatus == 1" style="position: absolute;right: 12px;color: red;">↑</span>
                <span v-if="record.beforeLunchStatus == 3" style="position: absolute;right: 12px;color: green;">↓</span>
              </div>
            </a-tooltip>
          </template>
          <template slot="afterLunch" slot-scope="text, record">
            <a-tooltip :title="record | afterLunchRemark">
              <div style="position: relative;">
                <span>{{ record.afterLunch }}</span>
                <span v-if="record.afterLunchStatus == 1" style="position: absolute;right: 12px;color: red;">↑</span>
                <span v-if="record.afterLunchStatus == 3" style="position: absolute;right: 12px;color: green;">↓</span>
              </div>
            </a-tooltip>
          </template>
          <template slot="beforeDinner" slot-scope="text, record">
            <a-tooltip :title="record | beforeDinnerRemark">
              <div style="position: relative;">
                <span>{{ record.beforeDinner }}</span>
                <span v-if="record.beforeDinnerStatus == 1" style="position: absolute;right: 12px;color: red;">↑</span>
                <span v-if="record.beforeDinnerStatus == 3" style="position: absolute;right: 12px;color: green;"
                  >↓</span
                >
              </div>
            </a-tooltip>
          </template>
          <template slot="afterDinner" slot-scope="text, record">
            <a-tooltip :title="record | afterDinnerRemark">
              <div style="position: relative;">
                <span>{{ record.afterDinner }}</span>
                <span v-if="record.afterDinnerStatus == 1" style="position: absolute;right: 12px;color: red;">↑</span>
                <span v-if="record.afterDinnerStatus == 3" style="position: absolute;right: 12px;color: green;">↓</span>
              </div>
            </a-tooltip>
          </template>
          <template slot="beforeSleep" slot-scope="text, record">
            <a-tooltip :title="record | beforeSleepRemark">
              <div style="position: relative;">
                <span>{{ record.beforeSleep }}</span>
                <span v-if="record.beforeSleepStatus == 1" style="position: absolute;right: 12px;color: red;">↑</span>
                <span v-if="record.beforeSleepStatus == 3" style="position: absolute;right: 12px;color: green;">↓</span>
              </div>
            </a-tooltip>
          </template>
          <template slot="earlyMorning" slot-scope="text, record">
            <a-tooltip :title="record | earlyMorningRemark">
              <div style="position: relative;">
                <span>{{ record.earlyMorning }}</span>
                <span v-if="record.earlyMorningStatus == 1" style="position: absolute;right: 12px;color: red;">↑</span>
                <span v-if="record.earlyMorningStatus == 3" style="position: absolute;right: 12px;color: green;"
                  >↓</span
                >
              </div>
            </a-tooltip>
          </template>
        </a-table>
      </template>
      <template v-else>
        <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
      </template>

      <blood-sugar-modal ref="modalForm" @ok="modalFormOk"></blood-sugar-modal>
    </a-card>

    <a-card style="margin-top: 24px" :bordered="false" title="动态血糖">
      <j-image-upload
        class="avatar-uploader"
        text="上传"
        v-model="model.images"
        :is-multiple="true"
        :preview="true"
        :img-arr="imgArr"
      ></j-image-upload>
      <a-button type="primary" :loading="addSugarImg" @click="handleAddSugarImg">提交</a-button>
      <!-- <a-button type="warning" style="margin-left: 10px;" @click="viewAllSugarImgs">预览</a-button> -->
    </a-card>
  </section>
</template>

<script>
import { BloodProfileMixin } from '@/mixins/BloodProfileMixin'
import LineCharts from '@/views/bloodProfile/components/LineChart'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import BloodSugarModal from './modules/BloodSugarModal'
import { postAction } from '../../api/manage'

const listColumns = [
  {
    title: '日期/监测项',
    align: 'center',
    dataIndex: 'formatDate',
    width: 120
  },
  {
    title: '空腹',
    align: 'center',
    dataIndex: 'beforeBreakfast',
    width: 120,
    scopedSlots: { customRender: 'beforeBreakfast' }
  },
  {
    title: '早餐后',
    align: 'center',
    dataIndex: 'afterBreakfast',
    width: 120,
    scopedSlots: { customRender: 'afterBreakfast' }
  },
  {
    title: '午餐前',
    align: 'center',
    dataIndex: 'beforeLunch',
    width: 120,
    scopedSlots: { customRender: 'beforeLunch' }
  },
  {
    title: '午餐后',
    align: 'center',
    dataIndex: 'afterLunch',
    width: 120,
    scopedSlots: { customRender: 'afterLunch' }
  },
  {
    title: '晚餐前',
    align: 'center',
    dataIndex: 'beforeDinner',
    width: 120,
    scopedSlots: { customRender: 'beforeDinner' }
  },
  {
    title: '晚餐后',
    align: 'center',
    dataIndex: 'afterDinner',
    width: 120,
    scopedSlots: { customRender: 'afterDinner' }
  },
  {
    title: '睡前',
    align: 'center',
    dataIndex: 'beforeSleep',
    width: 120,
    scopedSlots: { customRender: 'beforeSleep' }
  },
  {
    title: '凌晨',
    align: 'center',
    dataIndex: 'earlyMorning',
    width: 120,
    scopedSlots: { customRender: 'earlyMorning' }
  }
]
export default {
  name: 'BloodSugar',
  mixins: [BloodProfileMixin],
  components: { VeLine, LineCharts, BloodSugarModal },
  data() {
    return {
      initCharts: 'init',
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId], type: 3, period: 0 },
      listColumns,
      charts: {
        visualMap: {
          top: 0,
          right: 30,
          align: 'left',
          orient: 'horizontal',
          precision: 1,
          pieces: [
            {
              gt: 0,
              lte: 4.4,
              color: '#e88327'
            },
            {
              gt: 4.4,
              lte: 7.8,
              color: '#00d570'
            },
            {
              gt: 7.8,
              color: '#fb0b0a'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        axisData: [],
        axisUnit: ' mmol/L',
        legend: ['所有', '空腹', '早餐后', '午餐前', '午餐后', '晚餐前', '晚餐后', '睡前', '凌晨'],
        showLegend: [],
        seriesData: [],
        lineStyle: [
          {
            index: 0,
            lineColor: '#f06980',
            textColor: '#4d4d4d',
            data: [4.4, 7.8]
          }
        ],
        areaStyle: {
          color: '#F2F2F2',
          data: [4.4, 10]
        }
      },
      url: {
        // 根据时段与时间周期查询血糖记录
        getCharts: '/101/01/1010101',
        // 按日期分组获取患者血糖记录
        getList: '/101/01/1010102'
        // 查询血糖统计数据 按照血糖记录类别进行统计
        // getStatisics: '/101/01/1010103'
      },
      model: {
        images: []
      },
      addSugarImg: false
    }
  },
  watch: {
    'model.images'(n) {
      console.log(n)
    }
  },
  filters: {
    beforeBreakfastRemark(record) {
      if (!record.beforeBreakfastRecord) return ''
      return record.beforeBreakfastRecord.remark || ''
    },
    afterBreakfastRemark(record) {
      if (!record.afterBreakfastRecord) return ''
      return record.afterBreakfastRecord.remark || ''
    },
    beforeLunchRemark(record) {
      if (!record.beforeLunchRecord) return ''
      return record.beforeLunchRecord.remark || ''
    },
    afterLunchRemark(record) {
      if (!record.afterLunchRecord) return ''
      return record.afterLunchRecord.remark || ''
    },
    beforeDinnerRemark(record) {
      if (!record.beforeDinnerRecord) return ''
      return record.beforeDinnerRecord.remark || ''
    },
    afterDinnerRemark(record) {
      if (!record.afterDinnerRecord) return ''
      return record.afterDinnerRecord.remark || ''
    },
    beforeSleepRemark(record) {
      if (!record.beforeSleepRecord) return ''
      return record.beforeSleepRecord.remark || ''
    },
    earlyMorningRemark(record) {
      if (!record.earlyMorningRecord) return ''
      return record.earlyMorningRecord.remark || ''
    }
  },
  created() {
    setTimeout(_ => {
      this.getAddSugarImg()
    }, 1500)
  },
  computed: {
    imgArr() {
      if (typeof this.model.images == 'string') {
        let img = this.model.images.split(',')
        img = img.reverse()
        return img
      } else {
        return this.model.images
      }
    }
  },
  methods: {
    getAddSugarImg() {
      postAction('/record/common/sugar/photo/info', {
        patientId: this.$route.query[PAGE_MENU_TYPE.PatientId]
      }).then(res => {
        console.log('/record/common/sugar/photo/info', res)
        if (res.success) {
          if (res.result.recordPhoto) {
            this.model.images = res.result.recordPhoto.split(',')
            this.model.images = this.model.images.reverse()
          } else {
            this.model.images = []
          }
        } else {
          // this.$message.error(res.message)
        }
      })
    },
    handleAddSugarImg() {
      this.addSugarImg = true
      if (this.model.images == '') {
        this.$message.error('请先上传动态血糖图')
        return false
      }
      postAction('/record/common/sugar/photo', {
        patientId: this.$route.query[PAGE_MENU_TYPE.PatientId],
        recordPhoto: this.model.images
      })
        .then(res => {
          if (res.success) {
            console.log(this.model.images)
            this.model.images = this.model.images.split(',')
            this.model.images = this.model.images.reverse()
            this.$message.success('动态血糖图上传成功')
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(_ => {
          this.addSugarImg = false
        })
        .then(res => {
          if (res.success) {
            this.$message.success('动态血糖图上传成功')
          } else {
            this, $message.error(res.message)
          }
        })
        .finally(_ => {
          this.addSugarImg = false
        })
    }
    // viewAllSugarImgs() {}
  }
}
</script>

<style lang="less" scoped>
.no-data {
  color: rgba(0, 0, 0, 0.25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}
</style>

